<template>
	<el-popover
		v-model="showPopover"
		width="400"
		:disabled="disabled"
		visible-arrow="left"
		placement="bottom"
		trigger="click"
	>
		<flexbox
			align="center"
			class="mince"
			v-for="(data, index) in dataValue"
			:key="index"
		>
			<el-input
				class="mince__key"
				size="mini"
				:value="data.key"
				@input="(val) => userInput('key', data, val)"
				placeholder="自定义名称"
			/>:
			<el-input
				class="mince__val"
				size="mini"
				:value="data.val"
				@input="(val) => userInput('val', data, val)"
				placeholder="自定义内容"
			/>
			<i
				class="mince__delete el-icon-circle-close"
				@click.stop="iconDelete(index)"
			/>
		</flexbox>
		<div class="add-btn" type="primary" @click="addValue">+新增细分项</div>
		<flexbox
			wrap="wrap"
			class="xh-box"
			:class="[disabled ? 'is_disabled' : 'is_valid']"
			slot="reference"
		>
			<div class="data" v-for="(data, index) in dataValueUsefull" :key="index">
				<span>{{ data.key }}:</span>
				<span>{{ data.val }}</span>
				<i class="delete-icon el-icon-close" @click.stop="iconDelete(index)" />
			</div>
			<div class="add" v-show="!dataValueUsefull.length">
				+{{ item.placeholder || '添加' }}
			</div>
		</flexbox>
	</el-popover>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => {
				return []
			}
		},
		/** 索引值 用于更新数据 */
		index: Number,
		/** 包含数据源 */
		item: {
			type: Object,
			default: () => ({})
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showPopover: false,
			dataValue: []
		}
	},
	computed: {
		dataValueUsefull() {
			return this.dataValue.filter((item) => item.key || item.val)
		}
	},
	watch: {
		value(val) {
			this.setDataValue(val)
		}
	},
	mounted() {
		this.setDataValue(this.value)
	},
	methods: {
		setDataValue(val) {
			const nooc = []
			nooc.push({
				key: '',
				val: ''
			})
			this.dataValue = val.length ? val : nooc
		},
		// 新增细分项
		addValue() {
			this.dataValue.push({
				key: '',
				val: ''
			})
		},
		// 用户输入
		userInput(type, data, val) {
			data[type] = val
			this.valueChange(this.dataValue)
		},
		// 叉号删除
		iconDelete(index) {
			this.dataValue.splice(index, 1)
			this.valueChange(this.dataValue)
		},
		// 输入的值
		valueChange(val) {
			this.$emit('value-change', {
				item: this.item,
				index: this.index,
				value: val
			})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.xh-box {
	border: 1px solid #ddd;
	box-sizing: border-box;
	min-height: 34px;
	border-radius: 3px;
	padding: 2px;
	font-size: 0;
	line-height: 28px;
	transition: border-color 0.1s linear;
	&.is_disabled {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		cursor: not-allowed;
	}
	&.is_valid:hover {
		border-color: #c0c4cc;
	}
}
.xh-box {
	cursor: pointer;
	.data {
		min-height: 24px;
		box-sizing: border-box;
		padding: 5px;
		font-size: 12px;
		background: #e2ebf9;
		border-radius: 3px;
		line-height: 14px;
		margin: 2px;
		display: inline-flex;
		flex-wrap: nowrap;

		> span:first-child {
			flex: 0 0;
			white-space: nowrap;
		}
		> span:last-child {
			flex: 1 1;
			white-space: normal;
			word-break: break-all;
		}
	}
	.add {
		padding: 5px;
		line-height: 14px;
		color: #5f88ff;
		font-size: 12px;
	}
}

.delete-icon {
	color: #999;
}

.mince {
	margin-bottom: 10px;
	&__key {
		margin-right: 8px;
	}
	&__val {
		margin: 0 8px;
	}
	&__delete {
		font-size: 16px;
		color: #e3e3e3;
		cursor: pointer;
	}
}
.add-btn {
	height: 26px;
	background: #e6ecff;
	color: #5f88ff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	margin-top: 10px;
	cursor: pointer;
}
</style>
